﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<title>同时动的两个盒子</title>
		<style type="text/css">
			div {
				width: 50px;
				height: 50px;
				background-color: #0C3;
				position: relative;
			}
		</style>
	</head>

	<body>
		<h1>
	全局变量与局部变量在实战中的应用
</h1>
		<div id="div1"></div>
		<div id="div2"></div>

		<script type="text/javascript">
 
			//代码示例一：
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			var i = 0;

			function M(obj) {
				i = i + 5;
				obj.style.left = i + "px";
				if(i < 500) setTimeout(function() {
					M(obj);
				}, 1);
			}
			setTimeout(M, 10, div1);
			setTimeout(M, 500, div2);
		</script>
	</body>

</html>